import 'package:flutter/material.dart';
import 'package:marquee/marquee.dart';

void main() => runApp(
  MyApp()
);

class MyApp extends StatelessWidget {
  const MyApp({Key key}) :super(key : key);

  @override
  Widget build(BuildContext context) {
      return MaterialApp(
        title: "douyin",
        home: Scaffold(
          body: Container(decoration: BoxDecoration(color: Colors.yellowAccent),
            child: Home(),
          ),
          bottomNavigationBar: BottomAppBar(
            child: Container(
              height: 100,
              decoration: BoxDecoration(color: Colors.blueAccent),
              child: BtmBar(),
            ),
          ),
        ),
      );
  }
}

class Home extends StatelessWidget{
  const Home({Key key}) : super(key : key);

  @override
  Widget build(BuildContext context) {
    //取得屏幕宽度
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height;
    return Stack(
      children: [
        Positioned(
          top: 0,
          height: 120,
          width: screenWidth,
          child: Container(
            decoration: BoxDecoration(color: Colors.pinkAccent),
            child: TopTab(),
          ),
        ),
        Positioned(
          bottom: 0,
          width: 0.7 * screenWidth,
          height: 150,
          child: Container(
            decoration: BoxDecoration(color: Colors.redAccent),
            child: BtnContent(),
          ),
        ),
        Positioned(
          right: 0,
          width: 0.25 * screenWidth,
          height: 0.3 * screenHeight,
          top: 0.4 * screenHeight,
          child: Container(
            decoration: BoxDecoration(color: Colors.white),child: getButtonList(),),
        ),
        Positioned(
          bottom: 0,
          right: 0,
          width: 0.25 * screenWidth,
          height: 0.25 * screenWidth,
          child: Container(decoration:
          BoxDecoration(
              color: Colors.purpleAccent), child: RotateAlbum(),),
        )
      ]
    );
  }
}

class TopTab extends StatefulWidget{
  TopTab({Key key}) : super(key: key);

  _TopTabState createState() => _TopTabState();
  
  }
  
class _TopTabState extends State<TopTab> with SingleTickerProviderStateMixin {
  TabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TabController(vsync: this, length: 2, initialIndex: 1);
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Expanded(
          flex: 2,
          child: Icon(Icons.search,size: 30,),
        ),
        Expanded(
          flex: 8,
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 50),
            width: 24,
            child: TabBar(
              indicatorColor: Colors.white,
              labelStyle: TextStyle(color: Colors.white, fontSize: 25),
              unselectedLabelStyle: TextStyle(color: Colors.grey[700], fontSize: 20),
              controller: _controller,
              tabs: <Widget>[
                Text("关注"),
                Text("推荐"),
              ],
            ),
          )
        ),
        Expanded(
          flex: 2,
          child: Row(
            children: [
              SizedBox(width: 20,),
              Icon(Icons.live_tv, size: 30,),
            ],
          ),
        )
      ],
    );
  }
}

class BtmBar extends StatelessWidget {
  BtmBar({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          getBtmTextWidget("首页", true),
          getBtmTextWidget("同城", false),
          AddIcon(),
          getBtmTextWidget("发现", false),
          getBtmTextWidget("我", false),
        ],
      )
    );
  }
}

getBtmTextWidget(String content, bool ifSelected) {
  return Text("$content", style: ifSelected ? TextStyle(fontSize: 18,
    color: Colors.white): TextStyle(fontSize: 18, color: Colors.grey[600]),);
}

class AddIcon extends StatelessWidget {
  AddIcon({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 35,
      width: 60,
      child: Stack(children: <Widget>[
        Positioned(
          height: 35,
          width: 50,
          child: Container(
            decoration:
              BoxDecoration(color: Colors.cyan, borderRadius: BorderRadius.circular(10)),
          ),
        ),
        Positioned(
          height: 35,
          width: 50,
          right: 0,
          child: Container(
            decoration:
              BoxDecoration(color: Colors.redAccent, borderRadius: BorderRadius.circular(10)),),),
        Positioned(
          height: 35,
          width: 50,
          right: 5,
          child: Container(
            decoration:
              BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(10)),
            child: Icon(Icons.add),
          ),
        ),
      ],),
    );
  }
}

class BtnContent extends StatelessWidget {
  BtnContent({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          ListTile(title: Text("@人民日报"),
            subtitle: Text("自从武汉决定迅速建设火神山医院和雷神山医院以来，中联重科第一时间响应，已现场集结30余台混凝土泵车、汽车吊、挖掘机和推土机等设备。"),),
          Row(children: <Widget>[
            Icon(Icons.music_note),
            //Marquee(text: "一方有难 八方支援：湖南上市公司积极参与新型肺炎抗击战",)
          ],),
        ],
      ),
    );
  }
}

class RotateAlbum extends StatefulWidget {
  RotateAlbum({Key key}) : super(key: key);

  @override
  _RotateAlbumState createState() {
    return _RotateAlbumState();
  }
}

class _RotateAlbumState extends State<RotateAlbum> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  var animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2),);
    animation = RotationTransition(turns: Tween(begin: 0.0, end: 1.0)
        .animate(_controller)
      ..addStatusListener((status) {
        if(status == AnimationStatus.completed) {
//          _controller.forward(from: 0.0);
        }
      }),
      child: Icon(Icons.music_note),);
    _controller.forward(from: 0.0);
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: animation,
    );
  }
}

getButtonList() {
  return Column(children: <Widget>[
    Container(
      width: 60,
      height: 70,
      child: Stack(children: <Widget>[
        Container(
          width: 60,
          height: 60,
          child: CircleAvatar(backgroundImage: NetworkImage("https:"
              "//dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/"
              "u=612723378,2699755568&fm=111&gp=0.jpg"),),
        ),
        Positioned(bottom: 0, left: 17.5,
          child: Container(
            width: 25,
            height: 25,
            decoration: BoxDecoration(
              color: Colors.redAccent,
              borderRadius: BorderRadius.circular(25)
            ),
            child: Icon(Icons.add, size: 20, color: Colors.white,),),)
      ],),
    ),
    IconText(text: "999w", icon: Icon(Icons.favorite, size: 55, color: Colors.redAccent,),),
  ],
  );
}

class IconText extends StatelessWidget {
  IconText({Key key, this.icon, this.text}) : super(key: key);
  final Icon icon;
  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
        icon,
        Text(text),
      ],),
    );
  }
}
